<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;

            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        /*
            offsetWith 内容+内边距+边框
            offsetHeight         

            offsetLeft
            offsetTop 
            距离参考父级 上边 或者左边的距离 
            
            offsetX
            offsetY 
        */

       /* 
           事件: 鼠标按下
                 鼠标移动
                 鼠标抬起来
           活动范围:
                鼠标按下活动范围  div 
                鼠标抬起来活动范围 div
                鼠标移动范围 鼠标会在整个文档内部移动  
            效果:
                  鼠标按下 鼠标移动 盒子跟随 
                  鼠标抬起 盒子保证不能再动了 
                  鼠标移动  盒子跟随  

            //  鼠标按下 记录一个坐标点 
            // 随着移动实时获取坐标点  实时的坐标点 减去 初始的坐标点  

            // 结果就是它的移动距离 



            // 盒子也有宽高 


            // 拿到快乐盒子的移动距离 
            // 按下鼠标的时候 也要记下盒子初始距离

            //随着移动实时获取坐标点 => 盒子本次的移动距离 

            // 盒子原始的位置 加上移动的距离 =>最终盒子在哪 


            //offsetLeft 和offsetTop 获取盒子的位置
       
            */
        var divEle = document.getElementsByTagName('div')[0];
        var startX = 0;
        var startY = 0;

        var boxLeft = 0;
        var boxTop = 0;

        var flag = false;
        divEle.onmousedown = function(e){
            flag = true  // 按下鼠标 移动 
            // 获取鼠标的初始位置
            startX = e.clientX;
            startY = e.clientY;

            //获取盒子初始的位置 
            boxLeft = divEle.offsetLeft;
            boxTop = divEle.offsetTop;

        }


        divEle.onmouseup = function(){
            flag = false // 抬起鼠标 不动了 
        }

        divEle.onmousemove= function(e){
            if(flag == false){  // 鼠标如果已经抬起来了 那么就不能移动
                return  
            }
            //移动的时候 实时的坐标点 减去初始的坐标点 = 移动的距离
            var moveX = e.clientX-startX;
            var moveY = e.clientY-startY;
            // 盒子原始的位置 加上移动的距离 =>最终盒子在哪 
            var x = moveX + boxLeft;
            var y = moveY + boxTop;

            if(x<=0){
                x=0;
            }
            if(y<=0){
                y=0;
            }

            if(x>=document.documentElement.clientWidth-divEle.offsetWidth){
                x = document.documentElement.clientWidth-divEle.offsetWidth;
            }

            if(y>=document.documentElement.clientHeight-divEle.offsetHeight){
                y = document.documentElement.clientHeight-divEle.offsetHeight;
            }

            divEle.style.left = x+'px';
            divEle.style.top = y+'px';

        }


    </script>
</body>

</html>